<template>
  <div class="commonPrescription-container" v-if="dialogTableVisible">
    <el-dialog
      title="选择常用处方"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="dialogTableVisible"
      @close="cancelSelect"
    >
      <div class="top-title-container">
        <el-form ref="searchForm">
          <el-form-item label="处方名称">
            <el-input v-model="presData.title" @keyup.native.enter="searchClick"></el-input>
          </el-form-item>
          <el-form-item label="处方性质">
            <el-select v-model="presData.category" @change="typeChange" placeholder="请选择">
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button
              class="main-btn"
              size="small"
              type="primary"
              @click="searchClick"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        border
        max-height="400px"
        :data="templatePrescriptionList"
        ref="multipleTable"
        :row-key="getRowKey"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column>
        <el-table-column label="处方名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <p>{{ scope.row.prescription.prescription_name }}</p>
          </template>
        </el-table-column>
        <el-table-column label="药品">
          <template slot-scope="scope">
            <p>
              <span
                v-for="(pro, idx) in scope.row.prescription.details"
                :key="idx"
                >{{ pro.product_name
                }}<i v-if="idx < scope.row.prescription.details.length - 1"
                  >，</i
                ></span
              >
            </p>
          </template>
        </el-table-column>
        <el-table-column label="处方性质">
          <template slot-scope="scope">
            <p>{{ scope.row.prescription.category_name }}</p>
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <p>{{ scope.row.user_id == 0 ? "诊所" : "个人" }}</p>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="presData.pager.number"
          :page-size="presData.pager.size"
          layout="total, prev, pager, next"
          :total="listTotal"
        >
        </el-pagination>
      </div>
      <div class="bottom-container">
        <el-button class="border-btn" size="small" @click="cancelSelect"
          >取消</el-button
        >
        <el-button
          class="main-btn"
          size="small"
          type="primary"
          @click="confrimSelect"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { prescriptionList, prescriptionCreate } from "@/api/templates.js";

export default {
  data() {
    return {
      presData: {
        type: 1,
        title: "",
        category: "",
        pager: {
          number: 1,
          size: 6,
        },
      },
      listTotal: 0,
      templatePrescriptionList: [], // 常用处方列表
      categoryOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "cycf",
          label: "成药处方",
        },
        {
          value: "ypcf",
          label: "饮片处方",
        },
        {
          value: "sycf",
          label: "输液处方",
        },
      ],
      dialogTableVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      multipleSelection: [],
    };
  },
  created() {
    // this.getTemplatePrescriptionList(this.presData)
  },
  methods: {
    getRowKey(row) {
      return row.ID;
    },
    resetForm(){
      this.presData.category=""
      this.presData.title=""
      this.presData.pager.number=1
    },
    openCommonList() {
      this.dialogTableVisible = true;
      this.multipleSelection = [];
      this.getTemplatePrescriptionList(this.presData);
    },
    closeCommonList() {
      this.dialogTableVisible = false;
      this.multipleSelection = [];
      this.resetForm()
    },
    cancelSelect() {
      this.dialogTableVisible = false;
      this.multipleSelection = [];
      this.resetForm()
    },
    confrimSelect() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: "warning",
          message: "请先选择处方",
          duration: 1500,
        });
        return;
      }
      this.dialogTableVisible = false;
      this.resetForm()
      this.$emit("selectList", this.multipleSelection);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getTemplatePrescriptionList(this.presData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.presData.pager.number = val;
      this.getTemplatePrescriptionList(this.presData);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    searchClick() {
      this.getTemplatePrescriptionList(this.presData);
    },
    typeChange(){
      this.presData.pager.number = 1;
      this.getTemplatePrescriptionList(this.presData);
    },
    getTemplatePrescriptionList(datas) {
      prescriptionList(datas).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.templatePrescriptionList = res.data.data || [];
          this.listTotal = res.data.total || 0;
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/outpatient/modules/commonPrescription.scss";
</style>